<template>
	<view class="result-container">
		<view>
			<qiun-data-charts type="line" :opts="opts" :chartData="chartData">
				
			</qiun-data-charts>
			<view style="color: burlywood;">该图表仅展示最近六次的视力数据折线图</view>
		</view>
		<view 
			v-for="item in historyList" 
			:key="item.id" 
			:class="['result-item', item.result < 1 ? 'danger' : 'success']">
			<view class="eye-type">
				<view v-if="item.eye==0">左眼</view>
				<view v-if="item.eye==1">右眼</view>
			</view>
			<view class="result-value">{{item.result}}</view>
			<view class="test-time">
				{{formatTime(item.datetime)}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartData:{
					categories: ["1","2","3","4","5","6"],
					series: [
						{
							name: "左眼视力",
							data: [0.1,0.8,0.2,0.3,0.4,0.2]
						},
						{
							name: "右眼视力",
							data: [0.7,0.4,0.6,0.1,0.4]
						},
						{
							name: "视力",
							data: [0.1,0.8,0.9,0.1,0.1,0.1]
						}
					]
				},
				opts: {
				    color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				    padding: [20,20,20,20],
				    enableScroll: false,
				    legend: {},
				    xAxis: {
				        disableGrid: true
				    },
				    yAxis: {
				        gridType: "dash",
				        dashLength: 2,
						disabled:true,
				    },
				    extra: {
				        line: {
							type: "straight",
				            width: 2,
				            activeType: "hollow"
				          }
				        }
				    },
				historyList:[],
			}
		},
		methods: {
			formatTime(date) {
				console.log(date);
				const formdate=date.split('T')[0];
				const formtime=date.split('T')[1].split('.')[0];
				//console.log(formtime);
			    return formdate+' '+formtime;
			},
			setChartData(){
				let res={
					categories: ["最近六次","五次","四次","三次","二次","一次"],
					series: [
						{
							name: "左眼视力",
							data: []
						},
						{
							name: "右眼视力",
							data: []
						},
						{
							name: "视力",
							data: []
						}
					]
				};
				for(let i=0;i<this.historyList.length;i++){
					if(res.series[2].data.length<6){
						res.series[2].data.unshift(this.historyList[i].result);
					}
					
					if(this.historyList[i].eye==0&&res.series[0].data.length<6){
						res.series[0].data.unshift(this.historyList[i].result);
						
					}
					if(res.series[1].data.length<6&&this.historyList[i].eye==1){
						res.series[1].data.unshift(this.historyList[i].result);
					}
				}
				console.log(res);
				this.chartData=res;
			}
		},
		mounted() {
			const cachedData = uni.getStorageSync('historyList');
			this.historyList=cachedData;
			console.log(this.historyList.length);
			//console.log(cachedData);
			new Promise(r => setTimeout(r, 1000));
			this.setChartData();
		}
	}
</script>

<style lang="scss">
.result-container {
  padding: 20rpx;
  
  .result-item {
    margin-bottom: 20rpx;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    padding: 20rpx;
    color: #fff;
    
    &.danger {
      background: linear-gradient(135deg, #ff4d4d, #cc0000);
    }
    
    &.success {
      background: linear-gradient(135deg, #00cc66, #00994d);
    }

    .eye-type {
      font-size: 38rpx;
      font-weight: bold;
      border-bottom: 2rpx solid rgba(255, 255, 255, 0.3);
      padding-bottom: 12rpx;
	  padding-left: 20rpx;
      margin-bottom: 12rpx;
      
      > view {
        display: inline-block;
        margin-right: 20rpx;
      }
    }

    .result-value {
      font-size: 36rpx;
      letter-spacing: 2rpx;
	  padding-left: 20rpx;
      margin: 16rpx 0;
    }

    .test-time {
      opacity: 0.9;
      font-size: 24rpx;
	  padding-left: 20rpx;
    }
  }
}
</style>